<template>
	<view class="contain">
		<view class="title">
			<view class="avatar">
				<image style="vertical-align: middle" src="@/static/avatar.png" alt="" srcset="">
					<text
					style="vertical-align: middle;">{{info.applyUserName}}</text>
					
			</view>

		</view> 
		<view class="center">
			
			<view class="" >
				<text class="name">出生日期:</text><text>{{info.userBirthday||'无'}}</text>
			</view>
			<view class="">
				<text class="name">联系电话:</text><text>{{info.applyMobile}}</text>
			</view>
			<view class="">
				<text class="name">请假类型:</text><text>{{leaveTypes(info.leaveType)}}</text>
			</view>
			<view class="" v-if="info.symptom">
				<text class="name">主要症状:</text><text>{{info.symptom}}</text>
			</view>
			
			<view class="">
				<text class="name">开始时间:</text><text>{{info.startTime}}</text>
			</view>
			<view class="">
				<text class="name">结束时间:</text><text>{{info.endTime}}</text>
			</view>
			<view class="">
				<text class="name">请假时长:</text><text>{{info.leaveTime}}天</text>
			</view>
			<view class="">
				<text class="name">请假事由:</text><text>{{info.leaveReason}}</text>
			</view>
			<view class="" v-if="info.isIncreased">
				<text class="name">是否新增:</text><text>{{info.isIncreased=='0'?'是':'否'}}</text>
			</view>
			<view class="" v-if="info.outpatients">
				<text class="name">是否就诊:</text><text>{{info.outpatients=='0'?'是':'否'}}</text>
			</view>
			<view class="" v-if="info.whereOutpatients">
				<text class="name">何处就诊:</text><text>{{info.whereOutpatients}}</text>
			</view>
			<view class="" v-if="info.diagnose">
				<text class="name">诊断结果:</text><text>{{info.diagnose}}</text>
			</view>
			<view class="" v-if="info.currentStatus">
				<text class="name">目前状况:</text><text>{{info.currentStatus=='0'?'在家':'住院'}}</text>
			</view>
			<view class="" style="display: flex;">
				<text class="name">请假状态:</text>
				<text class="">
					<text class="state" v-if='info.applyStatus==4'
						:style="{color:stateList[0].color,backgroundColor:stateList[0].bgc}">
						{{stateList[0].text}}
					</text>
					<text class="state" v-if='info.applyStatus==5'
						:style="{color:stateList[1].color,backgroundColor:stateList[1].bgc}">
						{{stateList[1].text}}
					</text>
					<text class="state" v-if='info.applyStatus==3'
						:style="{color:stateList[2].color,backgroundColor:stateList[2].bgc}">
						{{stateList[2].text}}
					</text>
					<text class="state" v-if='info.applyStatus==6'
						:style="{color:stateList[3].color,backgroundColor:stateList[3].bgc}">
						{{stateList[3].text}}
					</text>
				</text>
			</view>
			<view class="" v-if="info.leaveImg&&info.leaveImg.length">
				<text class="name">附件:</text>
				<image v-if='info.leaveImg.length>1' v-for="(it,i) in info.leaveImg" :key="i" mode="widthFix" style="width: 150px;
				height: 150px;margin-left: 30rpx;" :src="it" @tap="previewImg(i, info.leaveImg)"></image>
				<image v-else @tap="previewImg(0, info.leaveImg)" mode="widthFix" style="width: 150px;
				height: 150px;margin-left: 30rpx;" :src="info.leaveImg[0]"></image>
			</view>
			<view class="" style="display: flex;">

				<button v-if="info.applyStatus==4&&info.teacherId==userId" class="btn"
					@click="showModal">确认</button>
				<button v-if="info.applyStatus==4" class="btn cancelBtn" 
					@click="cancel">取消</button>
			</view>
			<!-- <u-modal :showCancelButton='true' :title="title" @cancel="cancelShow" :content='content' :show="show"
				@confirm="confirm" ref="uModal" :asyncClose="true"></u-modal> -->
		</view>

	</view>
</template>

<script>
	import {
		infoLeave,
		leaveType,
		leaveConfirmed,
		leaveCancel
	} from '@/api/leave.js';
	export default {
		data() {
			return {
				info: {

				},
				leaveType: [],
				content: '',
				title: '请假确认',
				show: false,
				stateList: [{
					text: '待确认',
					color: '#e1bc79',
					bgc: '#fef7ed'
				}, {
					text: '已确认',
					color: '#66c0a3',
					bgc: '#ebfaf7'
				}, {
					text: '已取消',
					color: '#afb1b5',
					bgc: '#fcf0f0'
				}, {
					text: '已销假',
					color: '#afb1b5',
					bgc: '#fcf0f0'
				}],
				userId:this.$util.getUser().userId,
				id:''
			}
		},
		computed: {
			leaveTypes() {
				return (channel) => {
					let leaveName = '';
					this.leaveType.forEach(it => {
						if (it.id == channel) {
							leaveName = it.name
							console.log('有少时诵诗书所所所', it)
						}
					})
					console.log('leaveName', leaveName)
					return leaveName
				}
			}
		},
		onLoad(op) {
			console.log('获取id', op.id)
			this.id=op.id;
			this.getInfo(this.id)
			this.getleaveType()
		},
		methods: {
			//查看大图
			previewImg(current, imgList) {
				console.log('点击查看大图', imgList)
				uni.previewImage({
					current,
					urls: imgList,
					// #ifndef MP-WEIXIN
					indicator: 'number'
					// #endif
				});
			},
			cancelShow(){
				this.show=false
			},
			showModal() {
				uni.showModal({
				 title: '提示',
				 content: '确认请假吗',
				 success: async(res)=> {
				  if (res.confirm) {
					  uni.showLoading({
					  	title: '正在确认中'
					  });
					const {
						data
					} = await leaveConfirmed(this.info.applyId)
					
					if (data.code == 0) {
						uni.hideLoading()
						this.$api.showTip('确认成功',()=>{
							this.getInfo(this.id)
						})
						
					} else {
						uni.hideLoading()
						this.$api.showTip('确认失败')
					}
				   
				  }
				 }
				});
			},

			cancel() {
				uni.showModal({
				 title: '提示',
				 content: '确认取消请假吗',
				 success: async(res)=> {
				  if (res.confirm) {
					  uni.showLoading({
					  	title: '正在取消中'
					  });
					const {
						data
					} = await leaveCancel(this.info.applyId)
					
					if (data.code == 0) {
						uni.hideLoading()
						this.$api.showTip('取消成功')
						this.getInfo(this.id)
					} else {
						uni.hideLoading()
						this.$api.showTip('取消失败')
					}
				   
				  }
				 }
				});
				
			},
			// 请假确认
			async confirm() {
				console.log('this.content',this.content)
				if (this.content == '确认请假吗') {
					
				} else if (this.content == '确认取消请假吗') {
					
				}

			},
			
			// 获取请假类型
			async getleaveType() {
				const {
					data
				} = await leaveType()

				if (data.code == 0) {
					data.data.list.forEach(it => {
						this.leaveType.push({
							name: it.typeName,
							id: it.typeId
						})
					})

				}

			},
			// 获取请假详情
			async getInfo(id) {
				const {
					data
				} = await infoLeave(id)
				if (data.code == 0) {
					this.info = data.data
					if (this.info.leaveImg.length) {
						this.info.leaveImg = JSON.parse(this.info.leaveImg)
					}
				}
			}
		}

	}
</script>

<style lang="scss">
	.contain {
		background-color: #fff;
		overflow: hidden;
		padding: 20rpx 0 0;
	}
	.avatar{
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.title {
		padding: 40rpx 30rpx 25rpx;
		border-bottom: 1rpx solid #dadbde;
		font-size: 30rpx;
	}

	.center {
		padding: 20rpx 20rpx;

		view {
			margin-bottom: 10rpx;
			font-size: 30rpx;
			// border-bottom: 1rpx solid #dadbde;
			padding: 20rpx 0;
		}

		text {
			color: #999;
			margin-left: 20rpx;

		}
	}

	.state {
		padding: 10rpx 20rpx;
		background-color: #fff8ee;
		font-weight: 400;
	}

	.icon-wode {}
</style>